<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item style="float:right">
        <el-button
          type="primary"
          plain
          class="el-icon-plus"
          @click="showMask"
        >添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <div class="tableWrap">
      <el-table v-loading="table_loading" :data="tableData" border style="width: 100%">
        <!-- 素材名称 -->
        <el-table-column prop="nickname" label="昵称" align="center" />
        <!-- 素材图片 -->
        <el-table-column label="图片" align="center">
          <template slot-scope="scope">
            <div>
              <img :src="common.img_url+scope.row.headImg" alt class="smallBG">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" align="center" />
        <!-- 操作 -->
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="deleteMaterial(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 添加的页面 -->
    <material-add
      v-if="showAddMask"
      :is-hidden="showAddMask"
      :detail-info="detailInfo"
      :is-disabled="isDisabled"
      @checkMask="checkMask"
      @refresh="getMaterialLists"
    />
    <!-- 分页器 -->
    <div class="block">
      <el-pagination
        background
        :page-sizes="[10,20,50,100]"
        :page-size="pageSize"
        :pager-count="11"
        layout="total, sizes, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script>
import materialAdd from '@/components/material/material_add'
import { deleteMaterial, materialList } from '../../api/material' // 添加组件
export default {
  components: {
    materialAdd
  },
  data() {
    return {
      showAddMask: false, // 是否显示添加弹窗
      total: 0, // 分页总数
      pageSize: 10, // 每页显示的总数
      page: 1, // 显示第几页
      tableData: [],
      detailInfo: {}, // 详细信息
      isDisabled: false, // 默认允许是否编辑
      table_loading: false
    }
  },
  mounted() {
    // 获取默认列表
    this.getMaterialLists()
  },
  methods: {
    showMask() {
      this.detailInfo = {}
      this.showAddMask = true
    },
    checkMask(isHidden) {
      this.detailInfo = {}
      this.showAddMask = isHidden
    },
    search() {
      this.getMaterialLists({
        pageSize: this.pageSize,
        pageNum: 1
      })
    },
    getMaterialLists(options = {
      pageSize: this.pageSize,
      pageNum: this.page
    }) {
      this.table_loading = true
      materialList(options).then(res => {
        this.total = res.data.data.count
        this.pageSize = res.data.data.pageSize
        this.page = res.data.data.pageNum
        this.tableData = res.data.data.list
        this.table_loading = false
      }).catch((error) => {
        this.table_loading = false
        this.$message.error('网络连接错误，请稍后再试')
      })
    },
    handleCurrentChange(val) {
      this.getMaterialLists({
        pageSize: this.pageSize,
        pageNum: val
      })
    },
    handleSizeChange(page) {
      this.getMaterialLists({
        'pageSize': page,
        'pageNum': this.page
      })
    },
    // 删除素材
    deleteMaterial(id) {
      this.$confirm('确认删除该素材吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMaterial( {
          id: id
        }).then((result) => {
          const res = result.data
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getMaterialLists()
          } else {
            this.$message.error(res.msg)
          }
        }).catch((err) => {
          this.$message.error('服务器网络错误，请稍后重试')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style scoped>
label {
  font-size: 14px;
  font-weight: normal;
}
.smallBG {
  width: 100px;
  height: 100px;
}
.tableWrap {
  margin-top: 20px;
}
.block {
  background: #fff;
  padding: 32px 16px;
}
</style>
